<template>
	<view>
		<uni-nav-bar :border="false" :fixed="true" :statusBar="true">
			<view class="flex align-center justify-center font-weight-bold w-100 " style="height: 180rpx;">
				<view class="mx-1"@click="changeTab(index)" v-for="(item,index) in tabBars" :key="index" :class="tabIdenx===index?'font-lg text-main':'font-md text-light-muted'">{{item.name}}</view>
				<text   class="iconfont icon-fatie_icon align-end justify-end mx-1" @click="navigateToaddinput(addInput)"></text>
			</view>
		</uni-nav-bar>
		
		<swiper :current="tabIdenx" :duration="150"  :style="'height:'+scrollH+'px;'" @change="onChangeTab">
			<!-- 关注 -->
			<swiper-item >
				<scroll-view scroll-y="true" :style="'height:'+scrollH+'px;'" @scrolltolower="loadmoreEvent()">
					<block v-for="(item,index) in list " :key="index">
						<common-list :item="item" :index="index" @dosupport="dosupport"></common-list>
						<divider></divider>
					</block>
					<load-more :loadmore="loadmore"></load-more>
				</scroll-view>
			</swiper-item>
			<!-- 话题 -->
			<swiper-item >
				<scroll-view scroll-y="true" :style="'height:'+scrollH+'px;'" >
					<!-- 热门分类 -->
					<hotCate :hotCate="hotCate"></hotCate>
					<!-- 搜索框 -->
					<view class="p-2">
						<view class="bg-light rounded flex align-center justify-center py-2 text-secondary" @click="openSearch">
							<text class="iconfont icon-sousuo mr-2"></text>
							搜索话题
						</view>
					</view>
					<!-- 轮播图 -->
					<swiper class="px-2 pb-2" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
						<swiper-item>
							<image src="/static/demo/datapic/1.jpg" style="height: 350rpx;"class="w-100 rounded"></image>
						</swiper-item>
						<swiper-item>
							<image src="@/static/demo/datapic/11.jpg" style="height: 350rpx;"class="w-100 rounded"></image>
						</swiper-item>
					</swiper>
					<view style="height: 10rpx;background-color: #D7D6DC;"></view>
					<!-- 最近更新 -->
					<view class="p-2 font-md">
						最近更新
					</view>
					<!-- 话题列表组件 -->
					<block v-for="(item,index) in topicList" :key="index">
						<topic-list :item="item" :index="index"></topic-list>
					</block>
					
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	const demo=[{
									username:"昵称",
									userpic:"../../static/tabber/default.jpg",
									newstime:"2021-12-1 15:30",
									isFollow:true,
									title:"我是标题",
									titlepic:"../../static/demo/datapic/12.jpg",
									support:{
										type:"unsupport",
										support_count:1,
										unsupport_count:2
									},
								    comment_count:2,
									share_num:2
								},
								{
									username:"昵称",
									userpic:"../../static/tabber/default.jpg",
									newstime:"2021-12-1 15:30",
									isFollow:true,
									title:"我是标题",
									titlepic:"",
									support:{
										type:"support",
										support_count:1,
										unsupport_count:2
									},
								    comment_count:2,
									share_num:2
								},
								{
									username:"昵称",
									userpic:"../../static/tabber/default.jpg",
									newstime:"2021-12-1 15:30",
									isFollow:true,
									title:"我是标题",
									titlepic:"../../static/demo/datapic/15.jpg",
									support:{
										type:"",
										support_count:1,
										unsupport_count:2
									},
								    comment_count:2,
									share_num:2
								},
								{
									username:"昵称",
									userpic:"../../static/tabber/default.jpg",
									newstime:"2021-12-1 15:30",
									isFollow:true,
									title:"我是标题",
									titlepic:"../../static/demo/datapic/13.jpg",
									support:{
										type:"support",
										support_count:1,
										unsupport_count:2
									},
								    comment_count:2,
									share_num:2
								}]
	import uniNavBar from '@/components/uni-ui/uni-nav-bar/uni-nav-bar.vue';
	import commonList from '@/components/common/common-list.vue';
	import loadMore from '@/components/common/load-more.vue';
	import hotCate from '@/components/news/hot-cate.vue'
	import topicList from '@/components/news/topic-list.vue'
	export default {
		components:{
			commonList,
			loadMore,
			hotCate,
			topicList
			
		},
		data() {
			return {
				scrollH:500,
				tabIdenx:0,
				tabBars:[{
					name:"关注"
				},
				{
					name:"话题"
				}],
				//关注列表
				list:[],
				//1.上拉加载更多 2.加载中... 3.没有更多了...
				loadmore:"上拉加载更多",
				hotCate:[{
					name:"关注"
				},{
					name:"推荐"
				},{
					name:"体育"
				},
				{
					name:"热点"
				},
				{
					name:"财经"
				},
				{
					name:"娱乐"
				}
				],
				topicList:[{
					cover:"/static/demo/topicpic/1.jpeg",
					title:"话题名称",
					desc:"话题描述",
					today_count:0,
					news_count:10
				},
				{
					cover:"/static/demo/topicpic/1.jpeg",
					title:"话题名称",
					desc:"话题描述",
					today_count:0,
					news_count:10
				},
				{
					cover:"/static/demo/topicpic/1.jpeg",
					title:"话题名称",
					desc:"话题描述",
					today_count:0,
					news_count:10
				},
				{
					cover:"/static/demo/topicpic/1.jpeg",
					title:"话题名称",
					desc:"话题描述",
					today_count:0,
					news_count:10
				},
				{
					cover:"/static/demo/topicpic/1.jpeg",
					title:"话题名称",
					desc:"话题描述",
					today_count:0,
					news_count:10
				},
				{
					cover:"/static/demo/topicpic/1.jpeg",
					title:"话题名称",
					desc:"话题描述",
					today_count:0,
					news_count:10
				},
				{
					cover:"/static/demo/topicpic/1.jpeg",
					title:"话题名称",
					desc:"话题描述",
					today_count:0,
					news_count:10
				},
				{
					cover:"/static/demo/topicpic/1.jpeg",
					title:"话题名称",
					desc:"话题描述",
					today_count:0,
					news_count:10
				},
				{
					cover:"/static/demo/topicpic/1.jpeg",
					title:"话题名称",
					desc:"话题描述",
					today_count:0,
					news_count:10
				},
				{
					cover:"/static/demo/topicpic/1.jpeg",
					title:"话题名称",
					desc:"话题描述",
					today_count:0,
					news_count:10
				}]
			}
		},
		onLoad(){
			uni.getSystemInfo({
								 success:res=>{
									 
									 this.scrollH=res.windowHeight-res.statusBarHeight
								 }
			})
			//加载测试数据
			this.list=demo
		},
		methods: {
			//打开搜索页面
			openSearch(){
				uni.navigateTo({
					url:'../search/search?type=topic'
				})
			},
			navigateToaddinput(addInput){
					uni.navigateTo({
						url:'../add-input/add-input',
					})
			},
			//切换选项卡
			changeTab(index){
				this.tabIdenx=index
			},
			//滑动
			onChangeTab(e){
				console.log(e)
				this.tabIdenx=e.detail.current
			},
			//顶踩
			dosupport(e){
							   let item=this.list[e.index]
							   let msg = e.type==='support'?'顶':'踩'
							  //之前没操作过
							  if(item.support.type==='')
							  {
							  item.support.type=e.type
							  item.support[e.type+'_count']++
							  }
							  else if(item.support.type==='support' && e.type==='unsupport')
							  {
								  item.support.support_count--;
								  item.support.unsupport_count++;
							  }
							  else if(item.support.type==='unsupport'&& e.type==='support')
							  {
								  item.support.support_count++;
								  item.support.unsupport_count--;
							  }
							  item.support.type=e.type
							 uni.showToast({
								 title:msg
								 
							 })
							 
			},
			//上拉加载
			loadmoreEvent(){
				//验证是否可加载状态
				if(this.loadmore!=='上拉加载更多')return;
				//设置加载状态
				this.loadmore='加载中'
				//模拟和加载数据
				setTimeout(()=>{
					//加载数据
					this.list=[...this.list,...this.list]
					//设置加载状态
					this.loadmore='上拉加载更多'
				},2000)
			}
		}
	}
</script>

<style>

</style>
